<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {ref} from "vue";
import useUserInfoStore from "@/stores/userInfo.js";
import {reEnterName} from "@/api/enterprise.js";
const userInfo = useUserInfoStore()
const dialogVisible = ref(false)
const input = ref("")

const updateName = async () => {
  try {
    let res = await reEnterName(userInfo.info.id,input.value)
    userInfo.info.enterpriseName  = input.value
    dialogVisible.value = false
    ElMessage.success( res)
  }catch(error) {
    ElMessage.error(error.response?.data?.msg || '修改失败')
  }
}

</script>

<template>
  <div class="container">
    <div class="row">
      {{userInfo.info.enterpriseName}}
    </div>
    <el-button class="bottons" plain @click="dialogVisible = true">修改企业名</el-button>
    <div class="num1">
      <p style="margin-top: 13vh; font-size: 25px">企业当前总人数：7</p>
    </div>
    <div class="num2">
      <p style="margin-top: 13vh; font-size: 25px">企业当前正在审批数：10</p>
    </div>
    <div class="num3">
      <p style="margin-top: 13vh; font-size: 25px">企业审批条数：20</p>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="企业名修改"
        width="500"
    >
      <span>请输入新企业名</span>
      <el-input v-model="input" style="width: 280px;margin-left: 2vh" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateName()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.row{
  text-align: center;
  font-family: 宋体;
  font-size: 40px;
  margin-top: 20px;
}
.bottons{
  float: right;
  margin-right: 20px;
}
.num1{
  background-color: #00D1FF;
  border-radius: 10px;
  text-align: center;
  margin-left: 6vh;
  margin-top: 20px;
  width: 35vh;
  height: 35vh;
  float: left;
}
.num2{
  background-color: #00D1FF;
  border-radius: 10px;
  text-align: center;
  margin-left: 6vh;
  margin-top: 5.5vh;
  width: 32vh;
  height: 32vh;
  float: left;
}
.num3{
  background-color: #00D1FF;
  border-radius: 10px;
  text-align: center;
  margin-left: 6vh;
  margin-top: 3.5vh;
  width: 30vh;
  height: 30vh;
  float: left;
}
</style>